/* 
    Document   : CSSSite
    Created on : 13 mars 2013
    Author     : TERCIER_AURORE
*/

root { 
    display: block;
}
/* Mise en page du site en général. */
body {
    position : absolute;
    top : 0px;
    left : 0px;
    height : 1050px;
    width : 1680px;
    margin : 0px;
    padding : 0px;
}

/* Déclaration de la police de la navigation. */
@font-face {
    font-family: "TitreNavigation";
    src: url('../fonts/JellykaKingsHat.ttf');
}

/* Déclaration de la police de titre. */
@font-face {
    font-family: "MonTitre";
    src: url('../fonts/GrusskartenGotisch.ttf');
}

/* Affiche l'image de fond de l'index. */
#content{
   margin : 0px;
   padding : 0px;
   height : 100%;
   width : 100%;
   background-image: url(../images/image.jpg);
   transition: all 1.2s ease-out;
   -o-transition: all 1.2s ease-out;
   -webkit-transition: all 1.2s ease-out; 
   -moz-transition: all 1.2s ease-out;
}

/* Affiche le fond noir du player. */
#content2{
   margin : 0px;
   padding : 0px;
   height : 100%;
   width : 100%;
   background-color : #000000;
}

/* Affiche la bannière d'entête. */
#entete{
   background-color : #568203;
   height : 140px;
   transition: all 1.2s ease-out;
   -o-transition: all 1.2s ease-out;
   -webkit-transition: all 1.2s ease-out; 
   -moz-transition: all 1.2s ease-out;
}

/* Mise en forme du titre de l'index. */
#titre1{
   color : #fff;
   font-size : 80px;
   font-family : "MonTitre";
   position:absolute;
   top: 30px;
   left: 730px;
}

/* Mise en forme du titre du player. */
#titre{
   color : #fff;
   font-size : 80px;
   font-family : "MonTitre";
   position:absolute;
   top: 30px;
   left: 30px;
}

/* Affiche la barre de navigation. */
#navigation{
    valign : middle; 
    background-color: #568203;
    height : 80px;
    width : 1680px;
    opacity : 0.5;
    padding-top : 15px;
    text-align : center;
    position : absolute;
    top : 445px;
	transition: all 1.2s ease-out;
   -o-transition: all 1.2s ease-out;
   -webkit-transition: all 1.2s ease-out; 
   -moz-transition: all 1.2s ease-out;
}

/* Mise en forme des liens de la navigation. */
#navigation a {
   font-family : "TitreNavigation"; 
   text-decoration : none !important;
   font-size : 40px;
   color : #fff;  
   margin-right : 60px;
   margin-left : 60px;
   opacity : 1;
}

/* Mise en forme du survol des liens de la navigation. */
#navigation a:hover {
   border:white solid 2px;
   padding: 10px;
   border-radius: 15px;
}

/* Position du bouton retour du player. */
#bouton{
    position:absolute;
    top: 50px;
    left: 1550px;
}

/* Mise en forme du bouton retour du player. */
#bouton a {
   font-family : "MonTitre"; 
   text-decoration : none !important;
   color: #fff;
   font-size: 40px; 
}

/*  Mise en forme du suvol du bouton retour du player. */
#bouton a:hover {
   border: 2px white solid;
   border-radius: 15px;
   padding:2px;
   margin-left:-4px;
}

/* Positionne la liste des médias. */
#liste{
    background-color : black;
    height: 910px;
    width:838px;
    color:white;
    border-right:2px #fff solid;
}

/* Positionne le player. */
#player{
    position:absolute;
    top: 140px;
    left: 840px;
    color: white;
    border-bottom: 2px #fff solid;
    height: 455px;
    width: 840px;
}

/* Mise en forme de l'image du player*/
.ImagePlayer{
	width: 100%;
	height: 100%;
	background-size: auto 100%;
	background-repeat:no-repeat !important;
	background-position:center;
}

/* Positionne les informations. */
#informations{
    position:absolute;
    top: 595px;
    left: 840px;
    color: #fff;
    height: 445px;
    width: 835px;
	padding-left:5px;
	padding-top:10px;
}

/* Mise en page des paragraphes. */
.info{
	margin:0px;
	border-bottom:1px dashed grey;
}

/* Mise en place des titres de l'information. */
.categorie{
	padding-right:10px;
	display:inline-block;
	width:100px;
}

/*CSS du broswer*/ 

#Fichier{
    width:  100px;
    min-height: 100px;
    margin-left: 30px;
    margin-right: 30px;
	margin-top: 15px;
    float:left;
    border:1px rgba(148,148,148,0.2) solid ;
    text-align: center;
}

#Contenu{
    margin-top: 20px;
    margin-bottom: 10px;
    height: 100px;
}

/* Définit la taille des images du volume */
.Vol{
    width : 48px;
    height : 48px;
}

/* CSS de la timeline du player*/
input[type=range] {
    -webkit-appearance: none;
    background-color: #D93A36;
    width: 200px;
    height:20px;
}

input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
    background-color: black;
    opacity: 1;
    width: 10px;
    height: 26px;
}

/* CSS du cadre du player audio */
#PlayerAudio {
    width: 400px; 
    padding: 10px;
    margin-top: 22%;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto; 	
    background: #303030;
    border: 5px solid #D93A36;
    border-radius: 50px;
    text-align:left; 
    width: 400px;
    width: 400px;
}